<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>10_过渡&动画1</title>
  <style>
    /* 显示到隐藏 leave */
    .v-leave,
    .v-enter-to {
      opacity: 1;
    }

    .v-leave-active,
    .v-enter-active {
      transition: opacity 2s;
    }

    .v-leave-to,
    .v-enter {
      opacity: 0;
    }

    /* 隐藏到显示 enter */
    /* .v-enter {
      opacity: 0;
    }

    .v-enter-active {
      transition: opacity 2s;
    }

    .v-enter-to {
      opacity: 1;
    } */
  </style>
</head>

<body>
  <!--
1. vue动画的理解
  操作css的trasition或animation
  vue会给目标元素添加/移除特定的class
2. 基本过渡动画的编码
  1). 在目标元素外包裹<transition name="xxx">
  2). 定义class样式
    1>. 指定过渡样式: transition
    2>. 指定隐藏时的样式: opacity/其它
3. 过渡的类名
  xxx-enter-active: 指定显示的transition
  xxx-leave-active: 指定隐藏的transition
  xxx-enter: 指定隐藏时的样式
-->

  <div id="app">
    <button @click="isShow = !isShow">按钮</button>
    <!-- 
      给显示&隐藏的元素添加一个过渡效果 
      transition：Vue的内置组件
      包裹显示&隐藏的元素，就可以给元素添加一些过渡或动画的效果
      实际上，就给元素添加了一些类名
    -->
    <transition>
      <p v-show="isShow">陶哥真帅</p>
    </transition>
  </div>

  <script type="text/javascript" src="../js/vue.js"></script>
  <script type="text/javascript">
    /*
      transition 过渡
      animation  动画
    */
    new Vue({
      el: '#app',
      data: {
        isShow: true
      }
    })
  </script>
</body>

</html>